<template>
<view>
  <view class="search-wrap">
    <u-search bgColor="white" placeholder="请输入关键字" :showAction="false" v-model="keyword" @search="getShopList"></u-search>
  </view>
  <scroll-view scroll-x style="width: 100%;">
    <view class="tag-wrap">
      <text :class="item.id == cid ? 'tag-active':''" v-for="item in categoryList" :key="item.id" @click="onSelectTag(item)">{{item.cate_name}}</text>
    </view>
  </scroll-view>
  <scroll-view scroll-y style="height: calc(100vh - 132px)">
    <view class="list-wrap">
      <view class="list-item" v-for="item in shopList" :key="item.id" @click="toDetail(item.id)">
        <view class="list-item-left">
          <u-image :showLoading="true" borderRadius="10rpx" :src="item.image"
                   width="90px" height="90px"></u-image>
        </view>
        <view class="list-item-right">
          <view class="title">{{item.name}}</view>
          <view class="desc ">
            {{item.shop_desc || '-'}}
          </view>
          <view class="local-wrap">
            <view>
              <u-icon name="map" size="30" color="#8c8c8c"></u-icon>
              <text>{{item.address}}</text>
            </view>
            <view class="tel-wrap" @click.stop="callPhone(item.mobile)">
              <u-icon name="phone-fill" color="white" size="30"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 30rpx;"></view>
  </scroll-view>
</view>
</template>

<script>
export default {
  data() {
    return {
      shopList:[],
      categoryList:[],
      keyword:'',
      cid:null,
      twoCid:null,
    };
  },
  onLoad({id,keyword,twoCid}) {
    this.keyword = keyword;
    this.cid = id;
    this.twoCid = twoCid;
    this.getCategory();
    this.getShopList();
  },
  methods: {
    onSelectTag(item){
      this.cid = item.id;
      this.getShopList();
    },
    getCategory(){
      this.$http.getCategoryTag({
        cate_id: this.twoCid
      }).then(res => {
        if (res.status === 200) {
          this.categoryList = res.data;
        }
      })
    },
    async getLocal() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02', //返回可以用于uni.openLocation的经纬度
          success: function (res) {
            resolve(res);
          },
          fail(err) {
            reject(err);
          }
        });
      })
    },
    callPhone(tel){
      uni.makePhoneCall({
        phoneNumber:tel
      })
    },
   async getShopList() {
      uni.showLoading({
        title:'加载中...'
      })
      let localRes = {
        longitude: '43.886821',
        latitude: '125.324736',
      };
      try {
        let r = await this.getLocal();
        localRes.longitude = r.longitude;
        localRes.latitude = r.latitude;
      } catch (e) {

      }
      this.$http.getLocalShopList({
        cate_id:  this.cid,
        longitude: localRes.longitude,
        latitude: localRes.latitude,
        page: 1,
        keyword:this.keyword
      }).then((res) => {
        this.shopList = res.data;
      }).finally(()=>{
        uni.hideLoading();
      });
    },
    toDetail(id){
      this.$u.route({url:`/pagesB/local/service_detail?id=${id}`})
    }
  },
}
</script>

<style scoped lang="scss">
page {
  height: 100vh;
  background: #f5f5f5 !important;
}

.search-wrap {
  padding: 20rpx 20rpx 10rpx;
}

.tag-active {
  color: #f34238;
}

.tag-wrap {
  width: 100%;
  padding: 20rpx;
  white-space: nowrap;
  text:first-child{
    padding-left: 0;
  }

  text {
    padding: 0 10rpx;
    display: inline-block;
    margin-right: 30rpx;
    font-size: 30rpx;
  }
}

.list-wrap {
  margin: 0 20rpx;

  .list-item {
    background: white;
    padding: 20rpx;
    display: flex;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    .list-item-left {
      margin-right: 20rpx;
    }

    .list-item-right {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-weight: bold;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; // 弹性伸缩盒
        -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
        -webkit-line-clamp: 2;
      }

      .desc {
        color: #878687;
        font-size: 24rpx;
        margin-top: 20rpx;
        letter-spacing: 2rpx;
        line-height: 1.4;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; // 弹性伸缩盒
        -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
        -webkit-line-clamp: 2;

      }

      .local-wrap {
        display: flex;
        justify-content: space-between;
        color: #8c8c8c;
        font-size: 24rpx;
        align-items: flex-end;
        flex: 1;
      }

      .tel-wrap {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        background: #46dd8e;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

}
</style>
